<template>
    <div class="box">
        <Lunbo></Lunbo>
        <div class="box-all banner1 tanxin">
            <div class="box-all-l">
                <Title1></Title1>
                <Title2></Title2>
                <Title3></Title3>
            </div>
            <div class="box-all-r">
                <div class="box-all-r-t">
                    <div class="box-all-r-t-p">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</div>
                    <div class="box-all-r-t-btn" @click="$store.state.loginshow = true">用户登录</div>
                </div>
                <div class="box-all-r-c">
                    <R_title1></R_title1>
                    <R_title2></R_title2>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Title1 from './content-title/Title1.vue';
import Title2 from './content-title/Title2.vue';
import Title3 from './content-title/Title3.vue';
import R_title1 from './content-right/R_title1.vue';
import R_title2 from './content-right/R_title2.vue';
import Lunbo from './Lunbo.vue';
export default {
    data() {
        return {};
    },
    components: { Title1, Title2, Title3, R_title1, R_title2, Lunbo }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less"; 
.box{
    background-color: #f4f4f4;
}
.box-all{
    background-color: #fff;
    align-items: start;
    .box-all-l{
        width: 75%;
        padding: 20px;
        box-sizing: border-box;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }
    .box-all-r{
        width: 25%;
        box-sizing: border-box;
        .box-all-r-t{
            position: relative;
            width: 100%;
            height: 130px;
            padding: 20px;
            box-sizing: border-box;
            font-size: 12px;
            background: -webkit-linear-gradient(top,white,#e8e8e8);
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            .box-all-r-t-p{
                line-height: 20px;
            }
            .box-all-r-t-btn{
                position: absolute;
                width: 80px;
                height: 30px;
                background-color: red;
                text-align: center;
                line-height: 30px;
                color: #fff;
                margin-top: 20px;
                border-radius: 7px;
                left: 50%;
                transform: translate(-50%);
                cursor: pointer;
            }
        }
        .box-all-r-c{
            box-sizing: border-box;
            padding: 20px;
        }
    } 
}
</style>